<template>
	<div class="labelTable" v-show="labelTable">
		<p>{{labelTitle}}</p>
		<a class="labelClose" @click="labelClose">&#10005;</a>
		<div class="tableFlex">
			<el-table ref="multipleTable1" :data="tableData1" border @selection-change="chooseLabels1">
				<el-table-column type="selection"></el-table-column>
				<el-table-column prop="name" label="标签名称"></el-table-column>
			</el-table>
			<el-table ref="multipleTable2" :data="tableData2" border @selection-change="chooseLabels2">
				<el-table-column type="selection"></el-table-column>
				<el-table-column prop="name" label="标签名称"></el-table-column>
			</el-table>
		</div>
		<div style="margin-top: 20px;overflow: hidden;">
			<div class="pag_block">
				<el-pagination @current-change="changeLabels" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
			</div>
		</div>
		<a @click="labelSubmit" class="labelSubmit">确定</a>
	</div>
</template>

<script>
	export default{
		prop:['LabelsIds','LabelsNames'],
		data(){
			return{
				interface:'',//接口地址
				labelTitle:'',
				labelTable:false,
				labelData:[],
				tableData1:[],
				tableData2:[],
				chooseLabelsIds:[],
				chooseLabelsNames:[],
				chooseLabelsIds1:[],
				chooseLabelsNames1:[],
				chooseLabelsIds2:[],
				chooseLabelsNames2:[],
				pagesize:30,
		        currentpage: 1,
		        total: 1
			}
		},
		methods:{
			getLabels() {
				this.tableData1 = [];
				this.tableData2 = [];
				console.log(this.$parent.labelType);
				if(this.$parent.labelType=='teacher'){
					this.labelTitle='讲师标签';
					this.interface = '/getLectureLabel?';
					this.getMethods();
				}else if(this.$parent.labelType=='user'){
					this.labelTitle='用户标签';
					this.interface = '/getAllUserLabel?';
					this.getMethods();
				}else if(this.$parent.labelType=='subject'){
					this.labelTitle='课程标签';
					this.interface = '/mns/label/getLabelDropdownbox';
					this.postMethods();
				}else if(this.$parent.labelType=='newLive'){
					this.labelTitle='直播标签';
					this.interface = '/mns/label/getLabelDropdownbox';
					this.postMethods();
				}else if(this.$parent.labelType=='createWare'){
					this.labelTitle='课件标签';
					this.interface = '/mns/label/getLabelDropdownbox';
					this.postMethods();
				}
            },
			getMethods(){
				this.$ajax({
                    url: this.$root.jifuUrl+this.interface+'page='+this.currentpage+'&num='+this.pagesize+'&rootcompanyid=1',
                    method: 'GET',
                    data: {},
                    success: res => {
                        if(res.data.code == 200){
							this.labelData = res.data.data.list;	
							this.total=res.data.data.pageParam.items;
							this.spliceTable();
							if(this.$parent.nowType=='edit'){
								setTimeout(() => {
								　　 this.rowMultipleChecked();
								}, 200)
							}
                        }
                    }
                });
			},
			postMethods(){
				this.$ajax({
                    url: this.$root.jifuUrl+this.interface,
					headers:{'ContentType': 'application/json; charset=utf-8'},
                    method: 'POST',
                    data: {
						page:this.currentpage,
						num:this.pagesize,
						rootcompanyid:1,
						types:[3]
					},
                    success: res => {
                        if(res.data.code == 200){
							this.labelData = res.data.data.list;	
							this.total=res.data.data.pageParam.items;
							this.spliceTable();
							if(this.$parent.nowType=='edit'){
								setTimeout(() => {
								　　 this.rowMultipleChecked();
								}, 200)
							}
                        }
                    }
                });
			},
			spliceTable(){
				for (var i = 0; i < this.labelData.length; i++) { 
					if(i<15){
						this.tableData1.push(this.labelData[i]);
					}else{
						this.tableData2.push(this.labelData[i]);
					}
				}
				this.labelData=[];		
			},
			//讲师回显选中结果
			rowMultipleChecked(){
				let objRow = [];
				if(this.$parent.labelType=='subject'){
					this.$parent.LabelsIds.forEach(element=>{
						objRow.push(element.id);
					});
				}else{
					objRow = this.$parent.LabelsIds
				}
				var selectTeachers=[];
				if(this.$parent.LabelsIds!=''){
					objRow.forEach(element =>{
						selectTeachers.push(parseInt(element))
					});
				};
				if(selectTeachers!=null){
					this.tableData1.forEach(element => {
						if(selectTeachers.indexOf(element.id)>=0){
							this.$refs.multipleTable1.toggleRowSelection(element);
						}
					});
					this.tableData2.forEach(element => {
						if(selectTeachers.indexOf(element.id)>=0){
							this.$refs.multipleTable2.toggleRowSelection(element);
						}
					});
				}
			},
			chooseLabels1(val){
				this.chooseLabelsIds1=[];
				this.chooseLabelsNames1=[];
				for(var i = 0;i<val.length;i++){
					this.chooseLabelsIds1.push(val[i].id);
					this.chooseLabelsNames1.push(val[i].name);
				}
			},
			chooseLabels2(val){
				this.chooseLabelsIds2=[];
				this.chooseLabelsNames2=[];
				for(var i = 0;i<val.length;i++){
					this.chooseLabelsIds2.push(val[i].id);
					this.chooseLabelsNames2.push(val[i].name);
				}
			},
			labelSubmit(){
				this.chooseLabelsIds = this.chooseLabelsIds1.concat(this.chooseLabelsIds2);
				this.chooseLabelsNames = this.chooseLabelsNames1.concat(this.chooseLabelsNames2);
				if(this.chooseLabelsIds.length>4){
					alert('讲师标签最多可选四个！');
				}else{
					if(this.$parent.labelType=='subject'){
						let objectIds = [];
						this.chooseLabelsIds.forEach(element=>{
							objectIds.push({id:element})
						})
						this.LabelsIds = objectIds;
					}else{
						this.LabelsIds = this.chooseLabelsIds;
					}
					this.labelTable=false;
					this.LabelsNames = this.chooseLabelsNames;
					this.$emit('labelNamesChanges',{'arg1':this.LabelsIds,'arg2':this.LabelsNames});
				};
//				console.log('submit:',this.chooseLabelsIds,this.chooseLabelsNames,this.LabelsIds,this.LabelsNames);
			},
			changeLabels(value){
				this.currentpage = value;
		        this.getLabels();
			},
			labelClose(){
				this.labelTable=false;
			}
		},
		mounted(){
			this.getLabels();
		}
	}
</script>

<style>
	.labelTable{width: 700px;height: 500px;background: #fff;border: 1px solid #ccc;position: fixed;top: 50%;left: 50%;margin-top: -250px;margin-left: -290px;z-index: 9999;border-radius: 10px;padding: 20px;box-sizing: border-box;font-size: 14px;} 
    .labelTable p{font-size: 16px;color: #333;}
    .labelTable .labelClose{width: 15px;height: 15px;position: absolute;top: 20px;right: 20px;cursor: pointer;}
    .labelTable .labelSubmit{width: 100px;height: 34px;line-height: 34px;display:block;font-size: 14px;background: #44CEF6;color:#fff;border-radius: 4px;text-align: center;cursor: pointer;margin: 0 auto;}
    .labelTable .tableFlex{margin-top: 20px;height: 338px;overflow-x: hidden;}
    .labelTable .tableFlex .el-table{width: 50%;float: left;box-sizing: border-box;}
</style>